<style lang="less">
  @import "./img-upLoad.less";
</style>
<template>
  <div>
    <Upload ref="upload" :show-upload-list="false" :on-success="handleSuccess" :on-error="handleError" :format="['jpg','jpeg','png']"
      :max-size="2048" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload"
      :multiple="multiple" type="drag" :action="upLoadUrl" style="display: inline-block;width:58px;" :data="uploaddata">
      <div style="width: 58px;height:58px;line-height: 58px;">
        <Icon type="camera" size="20"></Icon>
      </div>
    </Upload>
    <template v-if="multiple">
      <div class="admin-upload-list" v-for="item in imgList" :key="item">
        <template v-if="item">
          <img :src="item">
          <div class="admin-upload-list-cover">
            <Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
            <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
          </div>
        </template>
        <template v-else>
          <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
        </template>
      </div>
    </template>
    <template v-else>
      <div class="admin-upload-list" v-if="imgStr">
        <img :src="imgStr">
        <div class="admin-upload-list-cover">
          <Icon type="ios-eye-outline" @click.native="handleView(imgStr)"></Icon>
          <Icon type="ios-trash-outline" @click.native="handleRemove(imgStr)"></Icon>
        </div>
      </div>
    </template>
    <Modal title="查看图片" v-model="visible" :transfer="false">
      <img :src="imgName" style="width: 100%">
      <div slot="footer">
        <Button type="primary" size="large" long @click="visible=false">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  // <img-up-load  :transmitData="bannerfrom.imgList" @handleSuccess="handleImgUpLoadSuccess"></img-up-load>
  import util from "@/libs/util.js";
  export default {
    name: "imgUpLoad",
    props: {
      transmitData: [String, Array]
    },
    computed: {
      upLoadUrl() {
        return util.baseApi.qiniuImgUpLoadUrl;
      }
    },
    data() {
      return {
        uploaddata: {},
        defaultList: [],
        imgName: "",
        visible: false,
        multiple: false,
        imgList: typeof this.transmitData == "object" ? this.transmitData : [],
        imgStr: typeof this.transmitData == "string" ? this.transmitData : ""
      };
    },
    methods: {
      getImgToken() {
        util.judgeqiniuToken("Public").then(() => {
          const Publicqiniu = JSON.parse(localStorage.getItem(`Publicqiniu`));
          this.uploaddata.token = Publicqiniu.token;
        });
      },
      handleFormatError(file) {
        this.$Notice.warning({
          title: "文件格式不正确",
          desc: "文件 " + file.name + " 格式不正确，请选择图片文件。"
        });
      },
      handleSuccess(res) {
        let url = util.baseApi.qiniuImgDownUrl + res.key;
        if (this.multiple) {
          this.imgList.push(url);
          this.$emit("handleSuccess", this.imgList);
        } else {
          this.imgStr = url;
          this.$emit("handleSuccess", this.imgStr);
        }
      },
      handleError(...params) {
        this.$Notice.warning({
          title: "请重新上传图片"
        });
        util.getqiniuToken("Public").then(() => {
          this.getImgToken()
        })
      },
      handleView(name) {
        this.imgName = name;
        this.visible = true;
      },
      handleRemove(file) {
        if (this.multiple) {
          this.imgList.splice(this.imgList.indexOf(file), 1);
        } else {
          this.imgStr = "";
        }
      },
      handleFormatError(file) {
        this.$Notice.warning({
          title: "文件格式不正确",
          desc:
            "文件 " + file.name + " 格式不正确，请上传 jpg 或 png 格式的图片。"
        });
      },
      handleMaxSize(file) {
        this.$Notice.warning({
          title: "超出文件大小限制",
          desc: "文件 " + file.name + " 太大，不能超过 2M。"
        });
      },
      handleBeforeUpload() {
        const check = this.imgList.length < 5;
        if (!check) {
          this.$Notice.warning({
            title: "最多只能上传 5 张图片。"
          });
        }
        return check;
      },
      init() {
        if (typeof this.transmitData == "string") {
          this.multiple = false;
          this.imgStr = this.transmitData;
        } else if (typeof this.transmitData == "object") {
          this.multiple = true;
          this.imgList = this.transmitData;
        }
      }
    },
    mounted() {
      this.init();
      this.getImgToken();
    },
    watch: {
      transmitData: function (val) {
        this.init();
      }
    }
  };
</script>